import './assets/main.scss'

import { createApp,h } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

// 全局导入Element主题样式
import '@/styles/element/index.scss'
import ElementPlus from 'element-plus'

// 导入暗黑模式css变量
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/dark/css-vars.css'

// 引入组件
import MyComponent from './views/study3/components/MyComponent.vue'
// const apiUrl = import.meta.env.BASE_URL
// console.log(apiUrl)

// const vs = import.meta.env.VITE_BASE_API
// console.log(vs);

// const vs = import.meta.env.VITE_BASE_PATH

// console.log(vs);
// const apiUrl = import.meta.env.MODE
// console.log(apiUrl)

const app = createApp(App)


// 定义全局组件 MyComponent
// 注册全局组件(可链式调用)
app.component('MyComponent1',{
  name: 'MyComponent1',
  // 自定义渲染函数
  render(): any {
    const that = this as any
    // 调用 setup() 中返回的渲染函数
    return h('div', [
      h('h1', '通过vue的h函数自定义渲染'),
      h('p', 'This content is rendered using a render function in setup()'),
      h('button', { onClick: () => alert('Button clicked!') }, '点我'),
      // 渲染插槽内容
      that.$slots.default ? that.$slots.default() : null
    ])
  } 
}).component('MyComponent',MyComponent)

app.use(createPinia())
app.use(router)
app.use(createPinia())
app.use(ElementPlus)

app.mount('#app')

